<script setup>
import { queryAllApi ,addApi,queryByIdApi,updateApi, deleteApi} from '../../api/dept'
import { ElMessage,ElMessageBox  } from 'element-plus'
import {onMounted,  ref} from 'vue'
const deptList = ref([])

onMounted(() => {
  search()
})
//  查询全部信息
const search = async () =>{
  // const result = await axios.get('https://apifoxmock.com/m1/3128855-1224313-default/depts')
  // deptList.value = result.data.data
  const result = await queryAllApi()
  deptList.value = result.data
}
// 新增与修改
const dept = ref({name: ''})
const dialogFormVisible = ref(false)
const FormTitle = ref('')
const deptFormRef = ref() 
// 新增信息
const addDept = ()=>{
  dialogFormVisible.value = 'true'
  FormTitle.value = '新增部门'
  dept.value = {name:''}
  if(deptFormRef.value){
    deptFormRef.value.resetFields()
  }
}
// 保存信息
const save = async () =>{
  deptFormRef.value.validate(async valid =>{
    if(!valid) return
    let result 
    if(dept.value.id){
      result = await updateApi(dept.value) 
    }else{
      result = await addApi(dept.value)
    }
    if(result.code){
      ElMessage.success('操作成功')  
      dialogFormVisible.value = false
      search()
    }else{
      ElMessage.error(result.msg)
    }
  })
}
// 表单校验
const rules = ref({
  //绑定字段的校验规则,一个对象表示一种校验规则
  name: [
    { required: true, message: '部门名称不能为空', trigger: 'blur' },
    { min: 2, max: 10, message: '部门名称长度为2-10', trigger: 'blur' },
  ]
})
// 编辑操作
const edit = async (id) =>{
  FormTitle.value = '编辑部门信息'
  if(deptFormRef.value){
    deptFormRef.value.resetFields()
  }
  //1.根据id 查询信息   ---查询回显
  const result = await queryByIdApi(id)  
  if(result.code){
    dialogFormVisible.value = true
    dept.value = result.data
  }
}
// 删除操作
const del = (id)=>{
ElMessageBox.confirm('您确定要删除信息吗？','提示',
    {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}
  ).then(async() => {    // '确定'之后的操作
    const result = await deleteApi(id)    
    if(result.code){
      ElMessage.success('删除成功')
      search()
    }else{
      ElMessage.error(result.msg)
    }
    }).catch(() => {  // '取消'之后的操作
      ElMessage.info('您已取消删除')
    })
}
</script>

<template>
  <h1>部门管理</h1>
  <!-- 按钮 -->
  <div class="style">
    <el-button type="primary" @click="addDept">+ 新增部门</el-button>
  </div>
  <!-- 表格 -->
  <div class="style">
    <el-table :data="deptList" border style="width: 100%">
    <el-table-column type="index" prop="id" label="序号" width="100"  align="center"/>
    <el-table-column prop="name" label="部门名称" width="200" align="center"/>
    <el-table-column prop="updateTime" label="最后操作时间" width="450"align="center"/>
    <el-table-column prop="" label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>      
  <!-- dailog对话框 -->
   <el-dialog v-model="dialogFormVisible" :title="FormTitle" width="500">
    <el-form :model="dept" :rules="rules" ref="deptFormRef">
      <el-form-item label="部门名称 " label-width="80px" prop="name">
        <el-input v-model="dept.name"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
.style{
  margin: 20px;
}
</style>
